<template>
  <div class="home  d-flex flex-column my-container">
    <div class="">
      <el-form :model="searchModel" :inline="true" class="d-flex justify-content-end">
        <el-form-item>
          <el-input v-model="searchModel.name" placeholder="请输入设备名称" prefix-icon="el-icon-search"/>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchModel.time" type="datetimerange" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="mb-3 d-flex">
        <el-button size="medium" type="success" @click="goBack">返回</el-button>
        <el-button size="medium" type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <div class="d-flex mb-3">
        <el-tabs v-model="tabIndex" type="card" @tab-click="tabClick">
          <el-tab-pane label="设备故障记录" name="0"></el-tab-pane>
          <el-tab-pane label="设备告警记录" name="1"></el-tab-pane>
          <el-tab-pane label="应用场景异常记录" name="2"></el-tab-pane>
        </el-tabs>
        <!--        <div v-for="(item,index) in tab"-->
        <!--             :key="index"-->
        <!--             @click="tabClick(item,index)"-->
        <!--             :class=" tabIndex==index ? 'tab-button-active' : ''"-->
        <!--             class="tab-button">{{item}}-->
        <!--        </div>-->
      </div>
      <div class="col d-flex over-auto" v-if="tabIndex==0">
        <FaultInfo></FaultInfo>
      </div>
      <div class="col d-flex over-auto" v-if="tabIndex==1">
        <WarnInfo></WarnInfo>
      </div>
      <div class="col d-flex over-auto" v-if="tabIndex==2">
        <applicationScenario></applicationScenario>
      </div>
    </div>
  </div>
</template>

<script>
  import WarnInfo from "./components/warnInfo.vue"
  import FaultInfo from "./components/faultInfo.vue"
  import applicationScenario from "./components/applicationScenario.vue"

  export default {
    data() {
      return {
        tab: ["设备故障记录", "设备告警记录", "应用场景异常记录"],
        tabIndex: "0",
        searchModel: {},
        isGlobalMessageShow: false,
        message: "",
        messageBoxSaveShow: false,
        loading: false
      }
    },
    components: {
      WarnInfo,
      FaultInfo,
      applicationScenario
    },
    created() {
      this.tabIndex = String(this.$route.query.index)
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      toDetail() {
        this.$router.push({
          path: "/monitoringCenter/monitoringCenterDetail"

        })
      },
      tabClick(tab, event) {
        this.tabIndex = tab.index
      },
      onSearch() {
      },
      /**
       * 刷新
       */
      refresh() {
        // this.loading = true
        // this.queryBTopicMainList()
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },
      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
